<template>
	<a-modal :visible="props.visible" centered title="下载导入模板" @cancel="cancel">
		<p class="margin-bottom-32">
			<span class="download-label">导入门店：</span>
			<a-select v-model:value="modelInfo.storeId" class="select-width" @change="changeSelect" placeholder="请选择门店" allowClear :options="options" :field-names="{label: 'name', value: 'id'}"></a-select>
		</p>
		<p class="margin-bottom-32">
			<span class="download-label">费用类型：</span>
			<a-radio-group v-model:value="modelInfo.dictName" size="small">
				<a-space>
					<a-radio-button v-for="item in expenseTypeList" :key="item.id || item.value" :value="item.name || item.label">
						<small>{{ item.name || item.label }}</small>
					</a-radio-button>
				</a-space>
			</a-radio-group>
		</p>
		<div>
			<span class="color-faad14">
				<question-circle-outlined />
				注：请选择下载对应的导入模板。
			</span>
		</div>
		<template #footer>
			<a-button @click="cancel">取消</a-button>
			<a-button type="primary" :disabled="!modelInfo.dictName" @click="handleOk">确定</a-button>
		</template>
	</a-modal>
</template>
<script setup lang="ts">
	import {ref, watchEffect, reactive} from 'vue'
	import {QuestionCircleOutlined} from '@ant-design/icons-vue'
	import settingApi from 'yuxin-base/src/api/setting-api'
	import {energyExport} from '@/api/energy'
	import {message, Modal} from 'ant-design-vue'
	const options = ref<any>([])
	const expenseTypeList = ref<any>([])
	const props = defineProps({
		visible: {
			type: Boolean,
			required: false
		}
	})
	const modelInfo = reactive({
		storeName: null,
		storeId: null,
		dictName: null
	})
	const emit = defineEmits(['update:visible', 'success'])
	const handleOk = () => {
		if (!modelInfo.storeId) {
			message.error('请选择门店')
			return
		}
		if (!modelInfo.storeName) {
			message.error('请选择费用类型')
			return
		}
		energyExport(modelInfo).then((res: any) => {
			const blob = new Blob([res], {
				type: 'application/vnd.ms-excel;charset=utf-8'
			})
			const link = document.createElement('a')
			link.href = window.URL.createObjectURL(blob)
			link.download = modelInfo.storeName + modelInfo.dictName + '能源模板.xls'
			link.click()
			emit('success')
			emit('update:visible', false)
		})
	}
	const cancel = () => {
		emit('update:visible', false)
	}
	const initSelect = () => {
		settingApi.getDeptStoreList().then((res: any) => {
			options.value = res.data
		})
	}
	// 根据label获取字典列表
	const getDictionaryListDict = () => {
		settingApi.getDicListByLabel('FEESUBJECT@ENERGY').then(({data}) => {
			expenseTypeList.value = data[0].metaList
		})
	}
	const changeSelect = () => {
		let index = options.value.findIndex(o => o.id === modelInfo.storeId)
		modelInfo.storeName = options.value[index].name
	}
	watchEffect(() => {
		if (props.visible) {
			initSelect()
			getDictionaryListDict()
		}
	})
</script>
<style>
	.download-label {
		width: 70px;
		height: 20px;
		font-size: 14px;
		color: #86909c;
		line-height: 20px;
	}
	.select-width {
		width: calc(100% - 70px);
	}
	.margin-bottom-32 {
		margin-bottom: 32px;
	}
</style>
